<!--<script>-->
<!--import { h } from "vue";-->

<!--export default {-->
<!--  name: "XtxBread",-->
<!--  render() {-->
<!--    // 获取面包屑选项;-->
<!--    const items = this.$slots.default();-->
<!--    // 定义数组 , 用于保存处理完的面包屑所有选项-->
<!--    const result = [];-->
<!--    // 遍历所有面包屑选项-->
<!--    items.forEach((item, index) => {-->
<!--      // 将遍历的面包屑选项添加到型数组,在每个面包屑选项候添加 > 元素-->
<!--      result.push(item);-->
<!--      // 判断是都为最后一个选项-->
<!--      if (index < items.length - 1) {-->
<!--        // 不是最后一个选项就添加 >-->
<!--        result.push(h("i", { class: "iconfont icon-angle-right" }));-->
<!--      }-->
<!--    });-->

<!--    return h("div", { class: "xtx-bread" }, result);-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped lang="less">-->
<!--.xtx-bread {-->
<!--  display: flex;-->
<!--  padding: 25px 10px;-->
<!--  &-item {-->
<!--    a {-->
<!--      color: #666;-->
<!--      transition: all 0.4s;-->
<!--      &:hover {-->
<!--        color: @xtxColor;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  i {-->
<!--    font-size: 12px;-->
<!--    margin-left: 5px;-->
<!--    margin-right: 5px;-->
<!--    line-height: 22px;-->
<!--  }-->
<!--}-->
<!--</style>-->
<script>
import { h } from "vue";
export default {
  name: "XtxBread",
  render() {
    const items = this.$slots.default();
    // 定义数组保存处理完的面包屑选项
    const result = [];
    // 遍历面包屑选项 ,判断是否是最后一项,
    items.forEach((item, index) => {
      // 添加到新数组中
      result.push(item);
      if (index < items.length - 1) {
        // 不是最后一项则添加>
        result.push(h("i", { class: "iconfont icon-angle-right" }));
      }
    });
    return h("div", { class: "xtx-bread" }, result);
  },
};
</script>
<style scoped lang="less">
.xtx-bread {
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
